<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/element.css?v=1">
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>

    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script src="../../javascript/axios.min.js"></script>
    <script src="../../js/wangEditor.min.js"></script>
    <script src="../../js/initEditor.js"></script>
</head>

<style>
    .inp {
        height: 25px;
        width: 50px;
        border: 1px solid #B8B8B8;
        text-align: center;
    }
</style>

<body>
    <div class="page-wrap" id="app">
        <section class="page-hd t">
            <header>
                <h5 class="title">
                    <a href="#" class="red">积分商品</a>
                </h5>
            </header>
            <hr />
        </section>
        <el-tabs type="border-card" @tab-click="handleClickTab">
            <el-tab-pane label="基础设置">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="商品名称" style="width: 360px;">
                        <el-input v-model="form.prodName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号" style="width: 360px;">
                        <el-input v-model="form.prodNo"></el-input>
                    </el-form-item>
                    <el-form-item label="是否上架" style="width: 360px;">
                        <el-switch active-color="#13ce66" inactive-color="#000" v-model="form.upShelf"></el-switch>
                    </el-form-item>
                    <el-form-item label="商品主图">
                        <el-upload :action="lunboUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemoveImg" :on-success="handlemainSuccess" :file-list="fileListImg">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品轮播图" label-width="100px">
                        <el-upload :action="lunboUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemoveCarouselImgs" :on-success="handleSuccess"
                            :file-list="fileListcarouseImgs">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品详情">
                        <div class="editor">

                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="creteIntegral">{{btnText}}</el-button>
                        <el-button onclick="pageBack()">取消</el-button>
                    </el-form-item>
                </el-form>



            </el-tab-pane>
            <el-tab-pane label="规格设置">
                <div style="margin-top:20px">
                    <el-row style="margin-bottom: 10px;" v-for="(e, i) in setmealGroup" :key="i">
                        <el-col :span="2">
                            <div>商品规格:</div>
                        </el-col>
                        <el-col :span="20">
                            <div class="" style="background-color: #F9FAFC; padding: 20px; position: relative;">
                                <div>
                                    <span>规格名称</span>
                                    <el-tag>{{e.specName}}</el-tag>
                                </div>
                                <el-tag style="position: absolute; right: 20px; top: 10px;" @click="delspec(i)">删除
                                </el-tag>
                                <div style="margin-top: 20px;">
                                    <span>规格值</span>
                                    <el-tag v-for="(m, n) in e.specValueList" :key="n" closable style="margin: 0 5px"
                                        @close="handleClose(i,n)">
                                        {{m.specValueName}}
                                    </el-tag>
                                    <input style="height: 30px;" type="text" v-if="e.isShow" @keyup.enter="fnaddTag(i)"
                                        v-model="tagval" placeholder="请输入规格值">
                                    <span @click="handleAddspecs(i)"
                                        style="display: inline-block; margin-left: 10px; color: #11947F;"> +添加</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-button style="margin-left: 160px;" type="primary" @click="specVisible = true">添加规格</el-button>
                </div>
                <div style="margin-top: 20px;">
                    <el-table border :data="memberIntegralSetmealList" style="width: 100%"
                        :header-cell-style="{background:'#f7f4f8', color:'#000'}">
                        <el-table-column width="100" prop="setmealName" label="套餐名称">
                        </el-table-column>
                        <el-table-column label="价格">
                            <template slot-scope="scope">
                                <div>
                                    <input class="inp" type="number" min="0" v-model="scope.row.sectionIntegralPrice"
                                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                                    积分+<input type="number" min="0" class="inp" v-model="scope.row.sectionMoneyPrice">元
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="原价">
                            <template slot-scope="scope">
                                <div>
                                    ¥ <input class="inp" type="number" min="0" v-model="scope.row.originalPrice">
                                </div>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="库存">
                            <template slot-scope="scope">
                                <div>
                                    <input class="inp" type="number" min="0" v-model="scope.row.stockNum"
                                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="重量/kg">
                            <template slot-scope="scope">
                                <div>
                                    <input class="inp" type="text" v-model="scope.row.weight">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品套餐图片">
                            <template slot-scope="scope">
                                <!-- <el-upload :action="lunboUrl" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemoveImgMeal"
                                    :on-success="handleMealImgSuccess" :file-list="fileListImgMeals[index]">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog> -->
                                <img :src="visitimgurl+'/'+scope.row.image" style="width:100px;height:100px;background-color:#e0e0e0" alt="">
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <el-button @click="submitEdit" style="margin-left: 100px; margin-top: 20px;" type="primary">保存修改
                    </el-button> -->
                </div>
            </el-tab-pane>










        </el-tabs>
        <el-dialog title="添加规格" :visible.sync="specVisible" width="30%">
            <div>
                <el-input style="margin-bottom: 20px;" v-model="val1" placeholder="请输入规格名称"></el-input>
                <el-input v-model="val2" placeholder="请输入规格值"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="specVisible = false">取 消</el-button>
                <el-button type="primary" @click="addgoodspec">确 定</el-button>
            </span>
        </el-dialog>


    </div>
    <!---page-wrap------>
</body>

<script>
    function getQuery(name) {
        // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);

        if (r != null) {
            // 对参数值进行解码
            return decodeURIComponent(r[2]);
        }
        return null;
    }
    var integralId = getQuery('integralId')
    var goodId = getQuery('goodId')
    var instance = axios.create({
        baseURL: httpurl,
        timeout: 5000,
        headers: {
            'Content-Type': 'application/json',
            "Authorization": GetTokenInfo()
        }
    })
</script>

<script>

    var app = new Vue({
        el: "#app",
        data() {
            return {
                btnText: '立即创建',
                val1: true,
                pageNum: 1,
                pageSize: 10,
                talLength: 10,
                type: 1,
                tableintegralList: [],
                form: {
                    prodName: '',
                    prodNo: '',
                    mainImage: '',
                    carouselImage: '',
                    type: integralId,
                    prodDesc: '',
                    upShelf: false,
                    setmealGroup: '',
                    memberIntegralSetmealList: []

                },
                fileListImg: [],//商品主图
                fileListcarouseImgs: [],//轮播图
                fileListImgMeals: [],//商品套餐图
                imageUrl: '',
                dialogImageUrl: '',
                dialogVisible: false,
                actionUrl: httpurl + "/uploadImgQiniu?pathName=productImg&&divisor=1&dividend=1",
                lunboUrl: httpurl + "/uploadImgQiniu?pathName=productImg&&divisor=0&dividend=1",
                lunboArray: [],
                visitimgurl:visitimgurl,
                tagval: '',
                isShow: false,
                setmealGroup: [],
                // setmealGroup: [
                //     {
                //         specName: '颜色',
                //         isShow: false,
                //         specValueList: [
                //             {
                //                 specValueName: '红色'
                //             },
                //             {
                //                 specValueName: '蓝色'
                //             }

                //         ]
                //     },
                //     {
                //         specName: '大小',
                //         isShow: false,
                //         specValueList: [
                //             {
                //                 specValueName: 'xl'
                //             },
                //             {
                //                 specValueName: 'ml'
                //             }

                //         ]
                //     }
                // ],
                specVisible: false,
                val1: '',
                val2: '',
                memberIntegralSetmealList: [],
                goodObj: {}
            };
        },

        mounted() {

            this.$nextTick(() => {
                initEditor()
            })
            this.setmealGroup.length > 0 && this.initTableData()
            if (goodId) {
                this.btnText = '编辑完成'
                this.getqueryMemberIntegralProduct()
            }

        },

        methods: {
            //获取单个商品信息
            getqueryMemberIntegralProduct() {
                instance.get(`queryMemberIntegralProduct`, {
                    params: {
                        id: goodId
                    }
                }).then(res => {
                    console.log(res);
                    if (res.data.rtnCode == 200) {
                        this.goodObj = res.data.data
                        this.form = this.goodObj
                        this.memberIntegralSetmealList = this.form.memberIntegralSetmealList
                        this.setmealGroup = this.form.setmealGroup && JSON.parse(this.form.setmealGroup)
                        this.lunboArray = this.form.carouselImage.split(',')
                        console.log(this.lunboArray);
                        this.fileListImg = this.getFilelist([this.goodObj.mainImage])
                        this.fileListcarouseImgs = this.getFilelist(this.lunboArray)
                        // this.memberIntegralSetmealList.forEach(v => {
                        //     let arr = v.image?this.getFilelist([v.image]):this.getFilelist([this.goodObj.mainImage])
                        //     this.fileListImgMeals.push(arr)
                        // })
                        console.log(this.fileListImg);
                        console.log(this.fileListcarouseImgs);
                        editor.txt.html(this.form.prodDesc)
                    }
                })
            },
            // 初始化filelist
            getFilelist(list) {
                let imgs = []
                list.forEach((item, index) => {
                    let obj = {}
                    obj.name = item
                    obj.url = visitimgurl + '/' + item
                    imgs.push(obj)
                })
                return imgs
            },
            // 修改提交
            // submitEdit() {
            //     console.log(this.lunboArray);
            //     let { goodObj } = this
            //     console.log(goodObj);
            //     let tempObj = {
            //         id: goodObj.id,
            //         prodName: goodObj.prodName,
            //         type: goodObj.type,
            //         upShelf: goodObj.upShelf == true ? 1 : 2,
            //         setmealGroup: JSON.stringify(this.setmealGroup),
            //         integralSetmealList: this.memberIntegralSetmealList,
            //     }
            //     console.log(tempObj);
            //     instance.post('updateMemberIntegralProduct', tempObj)
            //         .then(res => {
            //             if (res.data.rtnCode == 200) {
            //                 this.$message.success('修改成功')

            //             }
            //         })
            // },
            //
            handleClickTab(e) {
                let index = +e.index + 1
                this.tabIndex = index

                console.log(index);
            },

            //新增积分商品
            creteIntegral() {
                let form = this.form
                if (this.btnText == '立即创建') {
                    instance.post('insertMemberIntegralProduct', {
                        prodName: form.prodName,
                        prodNo: form.prodNo,
                        mainImage: form.mainImage,
                        carouselImage: this.lunboArray.join(','),
                        type: form.type,
                        prodDesc: editor.txt.html(),
                        upShelf: form.upShelf == true ? 1 : 2,
                        setmealGroup: JSON.stringify(this.setmealGroup),
                        integralSetmealList: this.memberIntegralSetmealList,
                    })
                        .then(res => {
                            if (res.data.rtnCode == 200) {
                                this.$message.success('新增成功')
                                pageBack()
                            } else {
                                this.$message.info(res.data.msg)
                            }
                        })
                } else {
                    // let { goodObj } = this
                    let tempObj = {
                        id: this.form.id,
                        prodName: this.form.prodName,
                        prodNo: this.form.prodNo,
                        type: this.form.type,
                        upShelf: this.form.upShelf == true ? 1 : 2,
                        prodDesc: editor.txt.html(),
                        // prodDesc:goodObj.prodDesc,
                        mainImage: this.form.mainImage,
                        carouselImage: this.lunboArray.join(','),

                        setmealGroup: JSON.stringify(this.setmealGroup),
                        integralSetmealList: this.memberIntegralSetmealList

                    }
                    instance.post('updateMemberIntegralProduct', tempObj)
                        .then(res => {
                            if (res.data.rtnCode == 200) {
                                this.$message.success('修改成功')
                                pageBack()
                            } else {
                                this.$message.info(res.data.msg)
                            }
                        })
                }


            },
            //
            addgoodspec() {
                if (this.val1 == '' || this.val2 == '') {
                    return this.$message.warning('参数不能空')
                }

                if (this.setmealGroup.length >= 2) {
                    return this.$message.warning('商品规格种类不能超过2')
                }
                this.specVisible = false
                this.setmealGroup.push(
                    {
                        specName: this.val1,
                        isShow: false,
                        specValueList: [
                            {
                                specValueName: this.val2
                            },


                        ]
                    }
                )
                // if (this.setmealGroup.length == 2) {
                this.initTableData()

                // }
                this.val1 = ''
                this.val2 = ''
            },
            //
            delspec(i) {
                this.setmealGroup.splice(i, 1)
                this.initTableData()
            },
            //
            handleAddspecs(i) {
                this.setmealGroup[i].isShow = !this.setmealGroup[i].isShow
            },
            // 商品轮播图
            handleSuccess(e) {
                console.log(e);

                if (e.rtnCode == 200) {
                    this.lunboArray.push(e.msg)
                }
                console.log(this.lunboArray);
            },
            // 商品主图
            handlemainSuccess(e) {
                if (e.rtnCode == 200) {
                    this.form.mainImage = e.msg
                }
            },
            handleRemoveImg(file, fileList) {
                console.log(file, fileList);
                this.form.mainImage = ''
                this.fileListImg = []
            },
            handleRemoveCarouselImgs(file, fileList) {
                console.log(file);
                console.log(fileList);
                this.fileListcarouseImgs = fileList
                this.lunboArray = []
                this.fileListcarouseImgs.forEach(v => {
                    this.lunboArray.push(v.name)
                })
                console.log(this.lunboArray);
            },
            handlePictureCardPreview(file) {
                console.log(file);
                this.dialogImageUrl = file.url;

                this.dialogVisible = true;
            },
            // 键盘回车，添加标签
            fnaddTag(i) {
                this.setmealGroup[i].specValueList.push({ specValueName: this.tagval })
                this.setmealGroup[i].isShow = false
                this.tagval = ''
                this.initTableData()

            },
            // 删除标签
            handleClose(i, n) {
                this.setmealGroup[i].specValueList.splice(n, 1)
                this.initTableData()
            },
            //
            initTableData() {
                this.memberIntegralSetmealList = []
                // if(this.setmealGroup.length<2){
                //     return
                // }
                let list1 = []
                let list2 = []
                list1 = this.setmealGroup[0].specValueList || []
                list2 = this.setmealGroup[1] ? this.setmealGroup[1].specValueList : []
                if (list1.length >= 1 && list2.length >= 1) {
                    list1.forEach(e => {
                        list2.forEach(v => {
                            this.memberIntegralSetmealList.push({
                                setmealName: e.specValueName + '+' + v.specValueName,
                                sectionIntegralPrice: '',
                                sectionMoneyPrice: '',
                                // originalPrice: '',
                                stockNum: '',
                                weight: '',
                                image:this.form.mainImage
                            })
                        })
                    })
                } else {
                    console.log('2113');
                    list1.forEach(e => {
                        this.memberIntegralSetmealList.push({
                            setmealName: e.specValueName,
                            sectionIntegralPrice: '',
                            sectionMoneyPrice: '',
                            // originalPrice: '',
                            stockNum: '',
                            weight: '',
                            image:this.form.mainImage
                        })
                    })
                }

                console.log(this.memberIntegralSetmealList);
            }





        },
    });
</script>

</html>